<template>
  <button v-ripple class="LunaButton" :class="[ButtonType, ButtonColor, { LunaDisableButton: disable }, { LunaSuffixButton: suffix }]" :style="[{ width: countTypeof(size) }, { height: countTypeof(size) }, ButtonPosition]" @click="handleClick" :disabled="disable">
    <i v-if="icon !== '' && !suffix" prefix class="iconfont" :class="icon" :style="{ 'font-size': countTypeof(iconSize, 'icon') }"></i>
    <slot></slot>
    <i v-if="icon !== '' && suffix" class="iconfont" :class="icon" :style="{ 'font-size': countTypeof(iconSize, 'icon') }"></i>
  </button>
</template>

<script>
export default {
  name: 'index',
  props: {
    disable: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    iconSize: {
      type: [Number, String],
      default: 16
    },
    type: {
      type: String,
      default: ''
    },
    lighter: {
      type: Boolean,
      default: false
    },
    suffix: {
      type: Boolean,
      default: false
    },
    fab: {
      type: Boolean,
      default: false
    },
    text: {
      type: Boolean,
      default: false
    },
    outline: {
      type: Boolean,
      default: false
    },
    top: {
      type: [Number, String],
      default: 9999
    },
    bottom: {
      type: [Number, String],
      default: 9999
    },
    left: {
      type: [Number, String],
      default: 9999
    },
    right: {
      type: [Number, String],
      default: 9999
    },
    size: {
      type: [Number, String],
      default: 9999
    }
  },
  computed: {
    ButtonType() {
      let countClass = 'LunaNormalButton'
      let lightClass = ''
      let fab = ''
      let outline = ''
      let text = ''
      if (this.lighter === true) {
        lightClass = 'Light'
      }
      if (this.fab === true) {
        fab = ' LunaFabButton'
      }
      if (this.outline === true) {
        outline = ' LunaOutlineButton'
      }
      if (this.text === true) {
        text = ' LunaTextButton'
      }
      // case 'icon':
      //   return 'LunaIconButton'
      switch (this.type) {
        case 'primary':
          countClass = 'Luna' + lightClass + 'PrimaryButton'
          break
        case 'success':
          countClass = 'Luna' + lightClass + 'SuccessButton'
          break
        case 'warning':
          countClass = 'Luna' + lightClass + 'WarningButton'
          break
        case 'error':
          countClass = 'Luna' + lightClass + 'ErrorButton'
          break
        case 'alert':
          countClass = 'Luna' + lightClass + 'AlertButton'
          break
      }
      return countClass + fab + outline + text
    },
    ButtonColor() {
      switch (this.lighter) {
        case true:
          return 'LunaLighterButton'
      }
      return ''
    },
    ButtonPosition() {
      if (this.top !== 9999 || this.bottom !== 9999 || this.left !== 9999 || this.right !== 9999) {
        let obj = {
          top: this.top,
          bottom: this.bottom,
          left: this.left,
          right: this.right
        }
        let finalObj = {
          position: 'fixed'
        }
        for (let i = 0; i < Object.values(obj).length; i++) {
          if (Object.values(obj)[i] !== 9999) {
            finalObj[Object.keys(obj)[i]] = this.countTypeof(Object.values(obj)[i])
          }
        }
        return finalObj
      }
      return ''
    }
  },
  methods: {
    handleClick(e) {
      if (this.disable) return
      this.$emit('onClick', e)
    },
    countTypeof(value, type) {
      if (type === 'icon' && this.fab) {
        value *= 2
      }
      if (value === 9999) return
      if (typeof value === 'number') {
        return value + 'px'
      }
      return value
    }
  }
}
</script>

<style scoped lang="scss"></style>
